<template>
    <Popup v-model="isShow">
        <p>请输入手机验证码</p>
        <ul
            class="code-wrapper"
            @click="handleFocus"
        >
            <li
                v-for="i in 6"
                :key="i"
                :class="{ active: isFocus && code.length == i - 1 }"
            >
                {{ code[i - 1] }}
            </li>
            <li class="input">
                <input
                    ref="input"
                    v-model="code"
                    type="number"
                    @input="handleInput($event)"
                />
            </li>
        </ul>
        <Button
            :loading="loading"
            :disabled="code.length !== 6"
            @click="handleOk"
        >
            确定
        </Button>
        <div
            :class="['tip', { disabled: countdown > 0 }]"
            @click="handleReAccept"
        >
            <span>没收到验证码 {{ countdown > 0 ? `(${countdown})` : '' }}</span>
        </div>
    </Popup>
</template>

<script>
import Popup from '@/components/Popup/Popup';
import Button from '@/components/Button';
export default {
    name: 'SMSPopup',
    components: {
        Popup,
        Button,
    },
    model: {
        prop: 'visible',
        event: 'update',
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        loading: {
            type: Boolean,
            default: false,
        },
        countdown: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            isFocus: false,

            code: '',
        };
    },
    computed: {
        isShow() {
            return this.visible;
        },
    },
    mounted() {},
    methods: {
        handleReAccept() {
            this.$emit('on-re-accept');
        },
        reset() {
            this.code = '';
        },
        close() {
            this.$emit('update', false);
        },
        handleOk() {
            let code = this.code;
            if (code.length !== 6) {
                return;
            }
            this.$emit('on-submit', code);
        },
        handleInput(e) {
            let val = String(e.target.value.replace(/[^\d]/g, ''));
            if (val.length > 6) {
                this.code = val.substr(0, 6);
            }
        },
        handleFocus() {
            this.$refs.input.focus();
            this.isFocus = true;
        },
    },
};
</script>

<style lang="less" scoped>
p {
    font-size: 14px;
    text-align: center;
}

.code-wrapper {
    display: flex;
    margin: 20px 0;

    li {
        flex: 1;
        height: 50px;
        border-radius: 5px;
        margin: 0 5px;
        text-align: center;
        line-height: 50px;
        border: solid thin #dfdfdf;

        &.active {
            border-color: #1890ff;
        }
    }

    .input {
        position: absolute;
        left: -999px;
    }
}

.tip {
    font-size: 12px;
    line-height: 12px;
    margin-top: 6px;
    color: #1890ff;
    text-align: center;

    &.disabled {
        color: #ccc;
    }
}

.fade-enter-active {
    transition: opacity 0.2s;
}

.fade-leave-active {
    transition: opacity 0.2s 0.1s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active .popup {
    transition: all 0.3s 0.1s;
}

.fade-leave-active .popup {
    transition: all 0.3s;
}

.fade-enter .popup,
.fade-leave-to .popup {
    opacity: 0;
    top: 100%;
    width: 150px;
}
</style>
